<template>
  <div class="main-operation" @click="onMainClick" ref="mainOperation">
    <div class="operation-wrapper" ref="operationWrapper">
      <div class="box content" ref="box">
        <div class="headtitle">
          <SubTitle
            :metaData="metaData"
            :readonly="false"
            :is-selected="currentEditOne === 'subTitle'"
            @select="onSelectEditOne('subTitle')"
            @change="handleChange"
          />
          <MainTitle
            :bannerConf="bannerConf"
            :readonly="false"
            :is-selected="currentEditOne === 'mainTitle'"
            @select="onSelectEditOne('mainTitle')"
            @change="handleChange"
          />
        </div>
        
        <MaterialGroup
          :current-edit-one="parseInt(currentEditOne)"
          :questionDataList="questionDataList"
          @select="onSelectEditOne"
          @change="handleChange"
          @changeSeq="onQuestionOperation"
          ref="materialGroup"
        />
        <SubmitButton
          :submit-conf="submitConf"
          :readonly="false"
          :skin-conf="skinConf"
          :is-selected="currentEditOne === 'submit'"
          @select="onSelectEditOne('submit')"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import communalLoader from '@materials/communals/communalLoader.js'
import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
import { useStore } from 'vuex'

const MainTitle = communalLoader.loadComponent('MainTitle')
const SubTitle = communalLoader.loadComponent('SubTitle')
const SubmitButton = communalLoader.loadComponent('SubmitButton')

const store = useStore()
const mainOperation = ref(null)
const materialGroup = ref(null)

const bannerConf = computed(() => store.state.editform.schema.bannerConf)
const submitConf = computed(() => store.state.editform.schema.submitConf)
const metaData = computed(() => store.state.editform.schema.metaData)
const skinConf = computed(() => store.state.editform.schema.skinConf)
const questionDataList = computed(() => store.state.editform.schema.questionDataList)
const currentEditOne = computed(() => store.state.editform.currentEditOne)
const currentEditKey = computed(() => store.getters['editform/currentEditKey'])
const autoScrollData = computed(() => {
  return {
    currentEditOne: currentEditOne.value,
    len: questionDataList.value.length
  }
})

const onSelectEditOne = async (currentEditOne) => {
  store.commit('editform/setCurrentEditOne', currentEditOne)
}

const handleChange = (data) => {
  if (currentEditOne.value === null) {
    return
  }
  const { key, value } = data
  const resultKey = `${currentEditKey.value}.${key}`
  store.dispatch('editform/changeSchema', { key: resultKey, value })
}

const onMainClick = (e) => {
  if (e.target === mainOperation.value) {
    store.commit('editform/setCurrentEditOne', null)
  }
}

const onQuestionOperation = (data) => {
  switch (data.type) {
    case 'move':
      store.dispatch('editform/moveQuestion', {
        index: data.index,
        range: data.range
      })
      break
    case 'delete':
      store.dispatch('editform/deleteQuestion', { index: data.index })
      break
    case 'copy':
      store.dispatch('editform/copyQuestion', { index: data.index })
      break
    default:
      break
  }
}

watch(
  skinConf,
  (newVal) => {
    const { themeConf, backgroundConf, contentConf } = newVal
    const root = document.documentElement
    if (themeConf?.color) {
      root.style.setProperty('--primary-color', themeConf?.color) // 设置主题颜色
    }
    if (backgroundConf?.color) {
      root.style.setProperty('--primary-background-color', backgroundConf?.color) // 设置背景颜色
    }
    if (contentConf?.opacity) {
      root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
    }
  },
  {
    immediate: true,
    deep: true
  }
)

watch(autoScrollData, (newVal) => {
  const { currentEditOne } = newVal
  if (typeof currentEditOne === 'number') {
    setTimeout(() => {
      const field = questionDataList.value?.[currentEditOne]?.field
      if (field) {
        const questionModule = materialGroup.value?.getQuestionRefByField(field)
        if (questionModule && questionModule.$el) {
          questionModule.$el.scrollIntoView({
            behavior: 'smooth'
          })
        }
      }
    }, 0)
  }
})
</script>

<style lang="scss" scoped>
.main-operation {
  width: 100%;
  height: 100%;
  min-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ebeced;
}

.toolbar {
  width: 100%;
  height: 38px;
  background-color: #fff;
  flex-grow: 0;
  flex-shrink: 0;
}

.operation-wrapper {
  margin-top: 20px;
  margin-bottom: 45px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 30px;
  background: #f1f2f3;
  margin-right: -30px;
  scrollbar-width: none;
  width: 90%;
  -ms-overflow-style: none;
  border-radius: 12px;

  &::-webkit-scrollbar {
    display: none;
  }

  .content {
    // background-color: #fff;
    padding-top: 10px;
  }
  .headtitle {
    background: #fff;
    border-radius: 12px;
  }
}
</style>
